<template>
      <div id="daili">
            <page-title>
                  <span slot="pageName">代理商列表</span>
            </page-title>
            <div class="btn">
                        <el-button class="addProject" type="primary" round @click="ShowDialog"  >添加代理商</el-button>
            </div>
            <!-- table -->
            <div class="table">
                  <el-table
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                              label="添加日期"
                              prop="addtime"
                              align="center"
                              >
                              <template slot-scope="scope">
                              <i class="el-icon-time"></i>
                              <span style="margin-left: 10px">{{ scope.row.addtime }}</span>
                              </template>
                        </el-table-column>
                        <el-table-column
                              label="代理商账户"
                              align="center"
                              prop="username"
                              >
                        </el-table-column>

                        <el-table-column
                              label="代理区域"
                              align="center"
                              prop="area"
                              >
                              <template slot-scope="scope">
                                    <div class="area">
                                          <el-tag>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.county }}</el-tag>
                                    </div>
                              </template>
                        </el-table-column>
                        <!-- 手机号码 -->
                        <el-table-column
                              label="手机号码"
                              prop="phone"
                              align="center"
                              >
                        </el-table-column>
                        <!-- 状态 -->
                        <el-table-column
                              label="代理状态"
                              align="center"
                              prop="status"
                              >
                              <template slot-scope="scope">
                                    <el-button size="mini" :type="scope.row.status == 1 ? 'success' : 'danger' ">{{ scope.row.status == 1 ? "开启" : "关闭" }}</el-button>
                              </template>
                        </el-table-column>
                        <!-- 二维码 -->
                        <!-- <el-table-column
                              label="二维码"
                              align="center"
                              prop="status"
                              >
                              <template slot-scope="scope">
                                   <img :src="scope.row.qrcode" v-if="scope.row.qrcode" alt="" width="50" height="50">
                                   <el-button type="primary" size="mini" v-else @click="CreateQrcode(scope.row)">生成二维码</el-button>
                              </template>
                        </el-table-column> -->

                        <!--  -->
                        <el-table-column label="操作" align="center">
                              <template slot-scope="scope">
                              <el-button
                                    size="mini"
                                    @click="editUser(scope.row)">编辑</el-button>
                              </template>
                        </el-table-column>
                  </el-table>
            </div>

            <!-- dialog -->
            <add-dialog :DialogData="DialogData" :FormData="FormData" @update="getAll" ></add-dialog>
      </div>
</template>

<script>
      import MapData from "@/assets/js/allmap.js"
      import PageTitle from '@/components/PageTitle'
      import AddDialog from "@/components/dialog/AddDialog"
      export default {
          components: {
                PageTitle,
                AddDialog,
          },  
          data() {
                return {
                      tableData: [],
                      DialogData: {
                            title: "",
                            show: false,
                      },
                      FormData: {}
                }
          },
          computed: {
                token() {
                      return localStorage.miniToken
                },
          },
          mounted() {
                this.getAll()
          },
          methods: {

            //     添加代理商信息
            ShowDialog() {
                  this.DialogData = {
                        title: "添加代理商",
                        show: true,
                        add: true,
                        edit: false,
                  }
                  this.FormData = {
                        username: "",
                        password: "",
                        phone: "",
                        province: "",
                        city: "",
                        county: "",
                        status: "1"
                  }
            },
            // 编辑代理商
            editUser( item ) {
                  this.DialogData = {
                        title: "编辑代理商",
                        show: true,
                        add: false,
                        edit: true
                  }
                  this.FormData = {
                        username: item.username,
                        phone: item.phone,
                        area: item.area,
                        province: item.province,
                        city: item.city,
                        county: item.county,
                        status: item.status,
                        userid: item.userid
                  }
            },
            // 获取所有代理商
            async getAll() {
                  let res = await this.$axios.post("/admin/user/agentlist", { token: this.token })
                  console.log(res);
                  this.tableData = res.data.data
                  // this.tableData.forEach( el => {
                  //       el.area = this.getArea(el.province, el.city, el.county)
                  // })
                  
                
            },
            // 计算地区
            getArea(province, city, county) {
                  let areaArr = MapData.testData
                  let str = ""
                  areaArr.forEach( el => {
                        if (province == el.adcode) {
                              str += el.name
                        }
                        if (city == el.adcode) {
                              str += el.name
                        }
                        if(county == el.adcode) {
                              str += el.name
                        }
                  })
                  return str
            },

            
          },
      }
</script>

<style lang="scss" scoped>
  .btn {
        text-align: left;
        margin-top: 30px;
  }
    .addProject {
        float: right;
        margin: 10px 20px;
  }
</style>